/* pages/dataDetail/dataDetail.wxss */
.main_tab {
  margin-top: 30rpx;
  display: flex;
  position: relative;
  justify-content: space-between;

  .tab_item {
    flex: 1;
    text-align: center;
  }

  .tab_active {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 16rpx solid transparent;
    border-right: 16rpx solid transparent;
    border-bottom: 20rpx solid rgb(165, 13, 13);
    bottom: -26rpx;
    transition: all .3s;
    // left: calc(107rpx - 16rpx);
    left: calc(125rpx - 16rpx);
    filter: drop-shadow(2rpx 2rpx 4rpx rgb(165, 13, 13));
  }

  .tab_item_active {
    color: rgb(165, 13, 13);
    font-weight: 600;
  }
}

.main_box {
  margin-top: 40rpx;
  height: calc(100vh - env(safe-area-inset-bottom, 50rpx) - 40rpx);
  .box_item {
    overflow-y: auto;
    .item_detail {
      display: flex;
      position: sticky;
      top: 0;
      flex-direction: column;
      z-index: 1;
      .detail_title {
        font-weight: bolder;
      }
    }
    .item {
      width: 700rpx;
      margin: 30rpx auto;
      background-color: #fff;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      box-shadow: 2px 4px 4px 0px rgba(0,0,0,0.1);

      .item_title {
        .title_qi {
          font-size: 40rpx;
          font-size: 600;
          margin-right: 20rpx;
        }

        .title_ri {
          color: rgb(83, 82, 82);
          font-size: 30rpx;
        }
      }

      .item_list {
        display: flex;
        padding: 20rpx 0 0rpx 0;
        box-sizing: border-box;
        flex-wrap: wrap;

        .list_item {
          margin-bottom: 20rpx;
          border-radius: 50%;
          // background-color: red;
          width: 60rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          color: #fff;
          font-weight: 500;
          font-size: 34rpx;
          margin-right: 22rpx;
          background: radial-gradient(circle at 70rpx 70rpx, #bb1b36, #ff0138);
          filter: drop-shadow(4rpx 4rpx 4rpx red);
        }

        .list_item_blue {
          background: radial-gradient(circle at 70rpx 70rpx, #091fa0, #0ca5ec);
          filter: drop-shadow(4rpx 4rpx 4rpx #091fa0);
        }

        .list_item:last-child {
          margin-right: 0;
        }
      }
    }
    .item:first-child {
      margin-top: 0;
    }
    .item_more {
      width: 100%;
      text-align: center;
      padding: 0 0 env(safe-area-inset-bottom, 50rpx) 0;
    }
  }
}